<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta charset="UTF-8">
    <title>Cola-UI 客户端框架</title>
    <base href="/">
    <link rel="stylesheet" type="text/css" href="./resources/nprogress/nprogress.css">
    <script src="./resources/nprogress/nprogress.js"></script>
    <link rel="stylesheet" type="text/css" href="./resources/cola-ui/semantic.css">
    <link rel="stylesheet" type="text/css" href="./resources/cola-ui/cola.css">
    <link rel="stylesheet" type="text/css" href="./common/common.css">
    <link rel="stylesheet" type="text/css" href="./example/employee.css">
  </head>
  <body>
    <script type="text/javascript">
      NProgress.configure({showSpinner: false, minimum: 0.3})
      NProgress.start();
    </script>
    <div id="mainView" class="v-box">
      <div class="boxul ui blue fragment fluid-layout">
        <li>
          <label>姓名</label>
          <div c-widget="input; bind:contain" class="mini"></div>
        </li>
        <li>
          <button c-widget="Button; icon:search; caption:查询; click:search " class="blue"></button>
        </li>
      </div>
      <div class="flex-box">
        <div class="ui fragment">
          <div c-widget="pager; bind:employees;" class="secondary">
            <div class="control item">
              <div>
                <div c-widget="button; icon:plus; caption:添加; click:add;" class="mini teal"></div>
              </div>
            </div>
            <div class="right menu">
              <div page-code="pages" class="item"></div>
            </div>
          </div>
          <div id="employeeTable">
            <template name="operations">
              <div>
                <div class="ui buttons icon mini">
                  <div c-onclick="edit(item)" class="ui teal basic button"><i class="icon edit"></i></div>
                  <div c-onclick="del(item)" class="ui orange basic button"><i class="icon trash outline"></i></div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div id="editLayer" class="default-background">
      <div class="v-box">
        <div class="caption-bar box"><i class="edit icon"></i><span class="caption">产品信息维护</span>
          <div class="tools">
            <div c-widget="button; icon:angle right; iconPosition:right; caption:返回; click:cancel" class="basic circular"></div>
          </div>
        </div>
        <div class="content content-background flex-box">
          <div class="ui padded segment basic">
            <div class="ui time-line circular">
              <div class="items">
                <div class="item">
                  <div class="icon"><i class="icon home"></i></div>
                  <div class="label">基本信息</div>
                  <div class="content">
                    <div class="ui segment basic">
                      <div class="ui form">
                        <div class="fields">
                          <div class="field one wide">
                            <label>姓</label>
                            <div c-widget="input; bind:editItem.lastName "></div>
                          </div>
                          <div class="field two wide">
                            <label>名</label>
                            <div c-widget="input; bind:editItem.firstName"></div>
                          </div>
                        </div>
                        <div class="fields">
                          <div class="field three wide">
                            <label>性别</label>
                            <div id="radioGroup" c-widget="RadioGroup; name:brand; bind:editItem.sex"></div>
                          </div>
                        </div>
                        <div class="fields">
                          <div class="field three wide">
                            <label>出生日期</label>
                            <div id="birthDatePicker"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="icon"><i class="icon fax"></i></div>
                  <div class="label">联系方式</div>
                  <div class="content">
                    <div class="ui segment basic">
                      <div class="ui form">
                        <div class="fields">
                          <div class="field three wide">
                            <label>电话</label>
                            <div c-widget="input; bind:editItem.phone"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="icon"><i class="icon lab"></i></div>
                  <div class="label">职位信息</div>
                  <div class="content">
                    <div class="ui segment basic">
                      <div class="ui form">
                        <div class="fields">
                          <div class="field three wide">
                            <label>称呼</label>
                            <div c-widget="input; bind:editItem.titleOfCourtesy"></div>
                          </div>
                          <div class="field three wide">
                            <label>头衔</label>
                            <div c-widget="input; bind:editItem.title"></div>
                          </div>
                        </div>
                        <div class="fields">
                          <div class="field three wide">
                            <label>入职日期</label>
                            <div id="hireDatePicker"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="icon"><i class="icon disk outline"></i></div>
                  <div class="label">家庭住址</div>
                  <div class="content">
                    <div class="ui segment basic">
                      <div class="ui form">
                        <div class="fields">
                          <div class="field two wide">
                            <label>国家</label>
                            <div id="countryDropDown"></div>
                          </div>
                          <div class="field two wide">
                            <label>省份</label>
                            <div c-widget="input; bind:editItem.region"></div>
                          </div>
                          <div class="field two wide">
                            <label>市/区/县</label>
                            <div c-widget="input; bind:editItem.city"></div>
                          </div>
                        </div>
                        <div class="fields">
                          <div class="field two wide">
                            <label>邮政编码</label>
                            <div c-widget="input; bind:editItem.postalCode"></div>
                          </div>
                        </div>
                        <div class="fields">
                          <div class="field six wide">
                            <label>详细地址</label>
                            <textarea c-bind="editItem.address"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="icon"><i class="icon disk outline"></i></div>
                  <div class="label">其他信息</div>
                  <div class="content">
                    <div class="ui segment basic">
                      <div class="ui form">
                        <div class="fields">
                          <div class="six wide field">
                            <label>备注</label>
                            <textarea c-bind="editItem.extension"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="ui segment basic">
            <div c-widget="button;icon:remove; caption:取消; click:cancel" class="negative large"></div>
            <div c-widget="button;icon:checkmark; caption:提交; click:ok" class="positive large"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./resources/jquery/jquery-2.1.3.js"></script>
  <script src="./resources/jquery/jquery.cookie.js"></script>
  <script src="./resources/cola-ui/3rd.js"></script>
  <script src="./resources/cola-ui/semantic.js"></script>
  <script src="./resources/cola-ui/cola.js" charset="UTF-8"></script>
  <script src="./common/common.js"></script>
  <script src="./example/employee.js"></script>
</html>